<template>
  <a-modal
    centered
    width="300px"
    v-model="visible"
    :z-index="1100"
    :mask-closable="false"
    :footer="null"
    @cancel="close"
  >
    <a-spin :spinning="loading">
      <a-row :gutter="[0, 10]">
        <a-col v-for="(item, index) in phoneList" :key="index" :span="24" :style="{ textAlign: 'center' }"><a-button :disabled="disabled" type="danger" @click="makePhone(item.type)">{{ item.name }}</a-button></a-col>
      </a-row>
    </a-spin>
  </a-modal>
</template>

<script>
import { takeCall, doCall } from '@/api/common'

export default {
  props: {
    telephone: {
      type: String,
      default: ''
    }
  },
  name: 'Telephone',
  data () {
    return {
      visible: true,
      loading: true,
      phoneList: [],
      disabled: false
    }
  },
  created () {
    this.getPhoneList()
  },
  methods: {
    getPhoneList () {
      const app = this
      app.loading = true
      takeCall().then(res => {
        if (res.status === 0) {
          app.phoneList = res.result.phone
          app.loading = false
        } else {
          app.$warning({
            zIndex: 1300,
            title: res.msg
          })
        }
      })
    },
    makePhone (type) {
      const app = this
      const phone = {}
      app.disabled = true
      phone['phone[type]'] = type
      phone['phone[value]'] = this.telephone
      doCall(phone).then(res => {
        if (res.status === 0) {
          app.$success({
            zIndex: 1300,
            title: res.msg
          })
          app.disabled = false
        } else {
          app.$warning({
            zIndex: 1300,
            title: res.msg
          })
          app.disabled = false
        }
      })
    },
    close () {
      this.visible = false
      this.$emit('cancel', this.visible)
    }
  }
}
</script>

<style scoped>

</style>
